
<template>
  <div class="bread-box">
    <el-breadcrumb separator="/">
      <!--<el-breadcrumb-item :to="{path:'/'}">首页</el-breadcrumb-item>-->
      <el-breadcrumb-item v-for="(item,index) in metaList" :key='item.name' :to="item.path" >{{item.name}}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button v-if="btnShow" type="primary" @click="sort()" style="float:right" size="mini" class="sort-btn">筛选</el-button>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        btnShow:false,
        metaList: []
      }
    },
    created(){
      this.metaList = this.$route.meta;
      this.$bus.$off('showSort')
      this.$bus.$on('showSort', () => {
        this.btnShow = true;
      });
      this.$bus.$off('hideSort')
      this.$bus.$on('hideSort', () => {
        this.btnShow = false;
      });
    },
    watch:{
      '$route'(to,from){
        this.metaList = this.$route.meta
      }
    },
    methods:{
      sort(){
        this.$bus.$emit('sort');
      }

    }

  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .sort-btn{
    position: absolute;
    right: 20px;
    top: 8px;
  }
</style>
